<template>
  <div class="app-container">
    <div class="filter-container">
        <el-input clearable v-model="search.version" placeholder="版本号" style="width: 170px;"></el-input>
        <el-select v-model="search.phoneSystem" clearable placeholder="操作系统" style="width: 130px; margin-left:5px;">
            <el-option 
            v-for="(item,index) in selectOptions.phoneSystem"
            :key="index"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <el-select v-model="search.client" clearable placeholder="终端版本" style="width: 130px; margin-left:5px;">
            <el-option 
            v-for="(item,index) in selectOptions.client"
            :key="index"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <!-- <el-select v-model="search.isNeed" clearable placeholder="强制更新" style="width: 130px; margin-left:10px;">
            <el-option 
            v-for="(item,index) in selectOptions.isNeed"
            :key="index"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select> -->
        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
        <el-button type="success" icon="el-icon-folder-add" @click="handleAdd()" >新增</el-button>
        <el-button type="info" icon="el-icon-folder-add" @click="dialognv.visible=true" >最新版本信息</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list"  border fit highlight-current-row stripe  style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" align="center" label="操作者">
        <template slot-scope="scope">
          <span>{{scope.row.userName}}</span>
        </template>
      </el-table-column>
      
      <el-table-column  min-width="10%" label="版本号" align="center">
        <template slot-scope="scope">
            <span>{{scope.row.version}}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="服务器版本号">
        <template slot-scope="scope">
          <span>{{ scope.row.serviceVersion }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" align="center" label="终端版本">
        <template slot-scope="scope">
          <span>{{scope.row.client | parseMobileClient}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" align="center" label="操作系统">
        <template slot-scope="scope">
          <span>{{scope.row.phoneSystem}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="25%" align="center" label="更新内容">
        <template slot-scope="scope">
          <span>{{scope.row.updateContent}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" align="center" label="强制更新">
        <template slot-scope="scope">
          <span> <el-tag :type="(scope.row.isNeed?'danger':'info')">{{(scope.row.isNeed?'是':'否')}}</el-tag></span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="下载链接">
        <template slot-scope="scope">
          <span>{{scope.row.url}}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="时间">
        <template slot-scope="scope">
          <span>{{ scope.row.updateTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作"  min-width="10%">
        <template slot-scope="scope">
            <el-popconfirm title="确定要删除这条记录吗？" icon="el-icon-info"  icon-color="red"  @onConfirm="handleDelete(scope.row.id)" >
              <el-button slot="reference" type="danger" size="small" icon="el-icon-delete" style="margin-left:5px;" >
                  删除
              </el-button>
            </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="getList" />

    <el-dialog title="发布新版本" :visible.sync="dialog.visible"  width="700px">
        <div class="ci">
          <div class="item">
            <span class="name required">手机系统</span>
            <span class="value">
              <el-select v-model="dialog.data.phoneSystem" clearable placeholder="手机系统" style="width: 220px; ">
                  <el-option 
                  v-for="(item,index) in selectOptions.phoneSystem"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
              </el-select>
            </span>
          </div>
          <div class="item">
            <span class="name required">终端用户类型</span>
            <span class="value">
              <el-select v-model="dialog.data.client" clearable placeholder="终端用户类型" style="width: 220px; ">
                  <el-option 
                  v-for="(item,index) in selectOptions.client"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
              </el-select>
            </span>
          </div>
          <div class="item">
            <span class="name required">APP版本号</span>
            <span class="value">
              <el-input clearable v-model="dialog.data.appVersion" maxlength="100" placeholder="APP版本号  如 1.0.1" style="width: 220px;"></el-input>
            </span>
          </div>
          <div class="item">
            <span class="name required">服务端版本号</span>
            <span class="value">
              <el-input clearable v-model="dialog.data.serviceVersion" maxlength="100" placeholder="服务端版本号 如 32" style="width: 220px;"></el-input>
            </span>
          </div>
          <div class="item">
            <span class="name required">文件名</span>
            <span class="value">
              <el-input clearable v-model="dialog.data.url" maxlength="100" placeholder="上传七牛云后的文件名" style="width: 100%;"></el-input>
            </span>
          </div>
          <div class="item">
            <span class="name required">强制更新</span>
            <span class="value">
              <el-switch  v-model="dialog.data.isNeed"  active-color="#13ce66"  inactive-color="#999999"></el-switch>
              {{(dialog.data.isNeed?'是':'否')}}
            </span>
          </div>
          <div class="item h100">
            <span class="name required">更新内容</span>
            <span class="value">
              <el-input type="textarea" clearable v-model="dialog.data.updateContent" maxlength="500" rows="4" placeholder="输入更新内容" style="width: 100%;"></el-input>
            </span>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialog.visible = false">取 消</el-button>
            <el-button type="primary" @click="saveNewVersion()" :loading="dialog.saveloading">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="最新版本信息" :visible.sync="dialognv.visible"  width="700px">
        <div class="ci">
          <div class="item h70">
            <span class="name">用户端</span>
            <span class="value">
                <table style="width:100%" class="table">
                    <tr><th>App平台</th><th>App版本号</th><th>服务端版本号</th></tr>
                    <tr><td>Android</td><td>{{dialognv.data.androidUserAppVersion}}</td><td>{{dialognv.data.androidUserServiceVersion}}</td></tr>
                    <tr><td>IOS</td><td>{{dialognv.data.iosUserAppVersion}}</td><td>{{dialognv.data.iosUserServiceVersion}}</td></tr>
                </table>
            </span>
          </div>
          <div class="item h70">
            <span class="name">商家端</span>
            <span class="value">
                <table style="width:100%" class="table">
                    <tr><th>App平台</th><th>App版本号</th><th>服务端版本号</th></tr>
                    <tr><td>Android</td><td>{{dialognv.data.androidShopAppVersion}}</td><td>{{dialognv.data.androidShopServiceVersion}}</td></tr>
                    <tr><td>IOS</td><td>{{dialognv.data.iosShopAppVersion}}</td><td>{{dialognv.data.iosShopServiceVersion}}</td></tr>
                </table>
            </span>
          </div>
          <div class="item h70">
            <span class="name">运营端</span>
            <span class="value">
              <table style="width:100%" class="table">
                    <tr><th>App平台</th><th>App版本号</th><th>服务端版本号</th></tr>
                    <tr><td>Android</td><td>{{dialognv.data.androidAgentAppVersion}}</td><td>{{dialognv.data.androidAgentServiceVersion}}</td></tr>
                    <tr><td>IOS</td><td>{{dialognv.data.iosAgentAppVersion}}</td><td>{{dialognv.data.iosAgentServiceVersion}}</td></tr>
                </table>
            </span>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialognv.visible=false">关闭</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>

import { deepClone,parseTime } from '@/utils'
import * as auth from '@/utils/auth'
import * as appdataApi from '@/api/appdata'
import * as userApi from '@/api/user'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import BxImage from '@/components/BxImage'
import * as imageHelper from '@/utils/image'
import * as enumHelper from '@/utils/enum'

export default {
  name: 'VersionInfoShop',
  components: { Pagination,BxImage },
  data(){
    return{
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        rows: 20,
        phoneSystem:'',
        version:'',
        client:''
      },
      search:{
        phoneSystem:'',
        version:'',
        client:''
      },
      selectOptions:{
         client:null,
         isNeed:[
           {label:'是',value:'true'},
           {label:'否',value:'false'},
         ],
         phoneSystem:[
           {label:'Android',value:'android'},
           {label:'IOS',value:'ios'},
         ]
      },
      dialog:{
          visible:false,
          saveloading:false,
          step:1,
          //数据
          data:{
            phoneSystem:'',
            appVersion:'',
            serviceVersion:'',
            isNeed:false,
            updateContent:'',
            url:'',
            client:''
          }
      },
      dialognv:{
          visible:false,
          saveloading:false,
          data:{
            androidUserAppVersion:'',
            androidUserServiceVersion:'',
            androidShopAppVersion:'',
            androidShopServiceVersion:'',
            androidAgentAppVersion:'',
            androidAgentServiceVersion:'',
            iosUserAppVersion:'',
            iosUserServiceVersion:'',
            iosShopAppVersion:'',
            iosShopServiceVersion:'',
            iosAgentAppVersion:'',
            iosAgentServiceVersion:''
          },
      }
    }
  },
  created(){
      var that=this;
      that.getList();
      that.selectOptions.client=[];
      Object.values(enumHelper.system.mobileClient).map(v=>{
        if(typeof(v)!='number'){return;}
        that.selectOptions.client.push({label:enumHelper.system.mobileClient.getName(v),value:v});
      })
  },
  mounted(){
    this.getVersionInfo();
  },
  filters:{
    parseMobileClient(val){
        return enumHelper.system.mobileClient.getName(val);
    }
  },
  methods: {
    getList(){
      var that=this;
      that.listLoading = true;
      that.listQuery.phoneSystem=that.search.phoneSystem;
      that.listQuery.version=that.search.version;
      that.listQuery.client=that.search.client;
      appdataApi.getAppVersionList(that.listQuery).then(res=>{
         if(res.data){
            that.list=[...res.data.items.map((item,index)=>{
              item._id=index+1;
              return item;
            })];
            that.listLoading = false;
            that.total=res.data.total || 0;
         }
      })
    },
    getVersionInfo(){
      var that =this;
      appdataApi.getNewAppVersionInfo().then(res=>{
         if(res.data){
           //android user
            var androidUser=res.data.anduser.split('|');
            that.dialognv.data.androidUserAppVersion=androidUser[0];
            that.dialognv.data.androidUserServiceVersion=androidUser[1];
            //ios user
            var iosUser=res.data.iosuser.split('|');
            that.dialognv.data.iosUserAppVersion=iosUser[0];
            that.dialognv.data.iosUserServiceVersion=iosUser[1];

            //android shop
            var androidShop=res.data.andshop.split('|');
            that.dialognv.data.androidShopAppVersion=androidShop[0];
            that.dialognv.data.androidShopServiceVersion=androidShop[1];
            //ios shop
            var iosShop=res.data.iosshop.split('|');
            that.dialognv.data.iosShopAppVersion=iosShop[0];
            that.dialognv.data.iosShopServiceVersion=iosShop[1];

          //android agent
            var androidAgent=res.data.andyinxiao.split('|');
            that.dialognv.data.androidAgentAppVersion=androidAgent[0];
            that.dialognv.data.androidAgentServiceVersion=androidAgent[1];
            //ios agent
            var iosAgent=res.data.iosyinxiao.split('|');
            that.dialognv.data.iosAgentAppVersion=iosAgent[0];
            that.dialognv.data.iosAgentServiceVersion=iosAgent[1];

         }
      })
    },
    searchClick(){
      var that=this;
      that.listQuery.page=1;
      that.getList();
    },
    handleAdd(){
      this.dialog.visible=true;
    },
    
    saveNewVersion(){
        var that=this;
        
        //check data 
        if(!that.checkNewVersionData(that.dialog.data)){
          return;
        }
        that.dialog.saveloading=true;
        appdataApi.addNewVersion(that.dialog.data).then(res=>{
            if(res.data){
                that.$message({
                    message: '保存成功！',
                    type: 'success'
                });
                
                that.dialog.saveloading=false;
                that.dialog.visible=false;
                that.getList();
            }
        })
    },
    checkNewVersionData(data){
      var that=this;
        var errorMsg=[];
        if(!data.phoneSystem){
            errorMsg.push('请选择操作系统类型');
        }
        if(!data.appVersion){
            errorMsg.push('请填写终端版本号');
        }
        if(!data.serviceVersion.trim()){
            errorMsg.push('请填写服务端版本号');
        }
        if(!data.updateContent.trim()){
            errorMsg.push('请填写更新内容');
        }
        if(!data.url.trim()){
            errorMsg.push('请填写文件名');
        }
        if(!data.client){
            errorMsg.push('请选择终端类型');
        }
        if(errorMsg.length>0){
          var errorHtml='<p class="errorbox-item">'+errorMsg.join('</p><p class="errorbox-item">')+'</p>';
          that.$notify({
            title: '验证未通过',
            dangerouslyUseHTMLString: true,
            position: 'bottom-left',
            message: errorHtml
          });
          return false;
        }
        return true;
    },
    handleDelete(id){
      var that=this;
       appdataApi.deleteAppVersion({id:id}).then(res=>{
          if(res.data){
            that.$message({
              message: '删除成功',
              type: 'success'
            });
            setTimeout(()=>{
                var idx=that.list.findIndex(item=>item.id==id);
                if(idx>-1){
                  that.list.splice(idx,1);
                }
            },500)
            
          }
       })
    }
  }
}
</script>
<style scoped>
table.table{ table-layout: fixed;}
 table.table>tr:nth-child(2){
    background: #f1f1f1;
 }
 table.table>tr:nth-child(3){
    background: #e1e1e1;
 }
 table.table>tr>td{text-align: center;}
</style>
